<template>
  <view class="search-item" @click="handleClick">
    <view
      class="selected"
      v-if="from === 'deliveryCompetitivenessService' && item.checked"
    >
      <u-icon name="checkmark" size="34" color="#fff"></u-icon>
    </view>
    <view class="item-top">
      <u-image
        class="item-img"
        :src="item.bannerUrl + '&image_process=resize,w_170,h_188'"
        width="170rpx"
        height="188rpx"
        border-radius="8rpx"
      ></u-image>
      <view class="item-info">
        <view class="item-title">
          <HighLight
            className="u-line-1"
            :text="item.activityName"
            :keyword="keyword"
          />
        </view>
        <view class="item-des">
          <HighLight
            className="u-line-1"
            :text="item.activityIntroduce"
            :keyword="keyword"
          />
        </view>
        <view class="item-tags">
          <template v-for="(tag, index) in item.activityTags">
            <view v-if="tag" class="tag" :key="index">
              <HighLight className="u-line-1" :text="tag" :keyword="keyword" />
            </view>
          </template>
        </view>
        <view class="item-view-count u-line-1">
          <text v-if="item.fakeActivityViewNum">{{
            item.fakeActivityViewNum
          }}</text>
        </view>
      </view>
    </view>
    <view v-if="item.content" class="content">
      <HighLight className="u-line-2" :text="item.content" :keyword="keyword" />
    </view>
  </view>
</template>

<script>
import HighLight from "./HighLight.vue";
import { reqAppAddBrowseRecord } from "@/api/modules/report";

export default {
  components: {
    HighLight,
  },
  props: {
    keyword: String,
    item: {
      type: Object,
      default: function () {
        return {};
      },
    },
    from: String, // 目前只有从竞争力分析交付服务页面有带过来
  },
  data() {
    return {
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      currentReport: "",
    };
  },
  methods: {
    handleClick() {
      // 如果是从竞争力分析交付服务页面跳转过来的，不需要进去详情页，只需要选中状态
      if (this.from === "deliveryCompetitivenessService") {
        this.$emit("select", this.item);
      } else {
        let params = {
          mpaActivityId: this.item.activityIdCode,
          activityName: this.item.activityName,
          activityDesc: this.item.activityIntroduce,
          browsePersonId: this.personId,
          moduleType: "OCCUPATION_MODULE_TYPE",
        };
        reqAppAddBrowseRecord(params, this.personId);
        this.$emit("click");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.search-item {
  margin: 0 32rpx 24rpx 32rpx;
  padding: 24rpx;
  border-radius: 16rpx;
  background-color: #ffffff;
  position: relative;
  .selected {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40rpx;
    height: 40rpx;
    background-color: $bg-color-primary;
    border-radius: 0 16rpx 0 16rpx;
  }
  .item {
    &-top {
      display: flex;
    }

    &-img {
      flex-shrink: 0;
      margin-right: 20rpx;
      width: 170rpx;
      height: 189rpx;
      border-radius: 8rpx;
    }

    &-info {
      flex: 1;
      width: 0;
    }

    &-title {
      margin-bottom: 16rpx;
      font-size: $uni-font-size-lg;
      color: #222222;
    }

    &-des {
      margin-bottom: 16rpx;
      font-size: $uni-font-size-nor;
      color: #979a9d;
    }

    &-tags {
      .tag {
        display: inline-block;
        margin-right: 16rpx;
        padding: 0 12rpx;
        height: 38rpx;
        line-height: 38rpx;
        border-radius: 4rpx;
        font-size: $uni-font-size-min;
        color: #555555;
        background-color: #f5f5f5;
      }
    }
    &-view-count {
      font-size: 24rpx;
      color: #979a9d;
    }
  }

  .content {
    margin-top: 22rpx;
    // max-height: 96rpx;
    font-size: $uni-font-size-sm;
    color: #bfbfbf;
  }
}
</style>
